<template>
  <div :key="keys"
       class="h-full grid grid-rows-[minmax(152px,1fr)_minmax(206px,1fr)_minmax(220px,1fr)_minmax(322px,1fr)] gap-[20px]">
    <alarmevents :dataList="inspection"/>
    <facilityoverview/>
    <Inspectionefficiency :dataList="inspectEfficiency"/>
    <alarmtrend :dataList="dataList"/>
  </div>
</template>
<script setup lang="ts">
import alarmevents from './components/alarmevents.vue';
import facilityoverview from "./components/facility-overview.vue"
import Inspectionefficiency from './components/Inspection-efficiency.vue'
import alarmtrend from "./components/alarm-trend.vue"
import {screeninspect} from '@/api/screen/largeData'
import { emitter } from '@/utils/mitt'
const keys = ref(0)
const inspectDT = ref(0)
const dataList = ref([]) //巡检记录
const inspection = ref() //巡检统计
const inspectEfficiency = ref() //巡检效率
const re = (data) => {
  getscreeninspect()
}
onMounted(() => {
  getscreeninspect()
  emitter.on('alarmEvents', re)

})
onBeforeUnmount(() => {
    emitter.off('alarmEvents',re)
})
const getscreeninspect = () => {
  screeninspect({
    inspectDT: inspectDT.value,//日常巡检（0-全部  1 日 2周 3 月 4 年））
  }).then(res => {
    // console.log("xunjin", res);
    res.result.inspectRecord.data.forEach(item => {
      if (item.name == '巡检正常') {
        item.color = '#2664B8'
      }
      if (item.name == '巡检异常') {
        item.color = '#27B3C5'
      }
    })
    dataList.value = res.result.inspectRecord
    inspection.value = res.result.inspect

    keys.value++
  })
}


</script>
